<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩管理</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<div id="MyApp">
    <h1>成绩管理</h1><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Achievement management</h4>
    <hr>
    <form>
        <input type="text" v-model="testPaper.keyword" placeholder="试卷名称">
        <button class="btn-success" type="button" @click="loadData()">查询</button>
    </form>
    <table class="table">
        <thead>
        <tr>
            <th>试卷名</th>
            <th>单选题个数</th>
            <th>多选题个数</th>
            <th>判断题个数</th>
            <th>简答题个数</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="x in testPaper.testPapers">
            <td>{{x.testPaperName}}</td>
            <td>{{x.selectTopic}}</td>
            <td>{{x.multipleTopic}}</td>
            <td>{{x.judgeTopic}}</td>
            <td>{{x.shortTopic}}</td>
            <td>{{x.startTime}}</td>
            <td>{{x.endTime}}</td>
            <td>
                <button class="btn-toolbar" type="button" @click="countQuery(x)">统计查询</button>
                <button class="btn-toolbar" type="button" @click="scoreRank(x)">成绩排名</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div>
        一共{{testPaper.total}}条数据,一共{{testPaper.pages}}页,当前{{testPaper.currentPage}}页。
        <button class="btn btn-success btn-sm" type="button" @click="testPaperPrePages()">上一页</button>
        <button class="btn btn-success btn-sm" type="button" @click="testPaperNextPages()">下一页</button>
        <button class="btn btn-success btn-sm" type="button" @click="testPaperIndexPage()">首页</button>
        <button class="btn btn-success btn-sm" type="button" @click="testPaperEndPage()">尾页</button>
        跳转到<input type="text" v-model="testPaper.selectPage">页
        <button class="btn btn-success btn-sm" type="button" @click="testPaperChangePage()">跳转</button>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">成绩排名</h4>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>考生ID</th>
                            <th>姓名</th>
                            <th>班级</th>
                            <th>试卷名</th>
                            <th>分数</th>
                        </tr>
                        </thead>
                        <tbody v-for="x in result.results">
                        <tr>
                            <td>{{x.examineeId}}</td>
                            <td>{{x.name}}</td>
                            <td>{{x.clazz}}</td>
                            <td>{{x.testPaperName}}</td>
                            <td>{{x.score}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div>
                        一共{{result.total}}条数据,一共{{result.pages}}页,当前{{result.currentPage}}页。
                        <button class="btn btn-success btn-sm" type="button" @click="resultPrePages()">上一页</button>
                        <button class="btn btn-success btn-sm" type="button" @click="resultNextPages()">下一页</button>
                        <button class="btn btn-success btn-sm" type="button" @click="resultIndexPage()">首页</button>
                        <button class="btn btn-success btn-sm" type="button" @click="resultEndPage()">尾页</button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <!--                    <button type="button" class="btn btn-primary" @click="saveUser()">保存</button>-->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>
</div>
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/vue.js"></script>
<script>
    new Vue({
        el: "#MyApp",
        data: {
            testPaper: {
                testPapers: [],
                total: 1,
                currentPage: 1,
                pages: 1,
                pageSize: 5,
                selectPage: 1,
                keyword: ""
            },
            result: {
                results: [],
                total: 1,
                currentPage: 1,
                pages: 1,
                pageSize: 5,
                selectPage: 1,
                testPaperName: ""
            }
        },
        methods: {
            loadData: function () {
                var self = this;
                $.ajax({
                    url: "/am/getTestPaperList",
                    type: "get",
                    data: self.testPaper,
                    success: function (result) {
                        self.testPaper = result.data;
                    }
                })
            },
            countQuery: function (x) {
                var testPaperName = x.testPaperName;
                $.ajax({
                    url: "/am/avgAndPassRate",
                    type: "get",
                    data: {"testPaperName": testPaperName},
                    success: function (result) {
                        if (result.code == 200) {
                            alert("均分: " + result.data.avg + "及格率: " + result.data.passRate)
                        } else {
                            alert("查询错误！")
                        }
                    }
                })
            },
            scoreRank: function (x) {
                var self = this;
                if (x != null) {
                    console.log("nicenicenice")
                    var testPaperName = x.testPaperName;
                    self.result.testPaperName = testPaperName;
                }
                $.ajax({
                    url: "/am/ranking",
                    type: "get",
                    data: self.result,
                    success: function (result) {
                        if (result.code == 200) {
                            self.result = result.data;
                            $("#myModal").modal("show")
                        }
                    }

                })
            },
            //试卷的分页
            testPaperPrePages: function () {
                if (this.testPaper.currentPage <= 1) {
                    this.testPaper.currentPage = 1;
                } else {
                    this.testPaper.currentPage = this.testPaper.currentPage - 1;
                }
                this.loadData();
            },
            testPaperNextPages: function () {
                if (this.testPaper.currentPage >= this.testPaper.pages) {
                    this.testPaper.currentPage = this.testPaper.pages;
                } else {
                    this.testPaper.currentPage = this.testPaper.currentPage + 1;
                }
                this.loadData();
            },
            testPaperIndexPage: function () {
                this.testPaper.currentPage = 1;
                this.loadData();
            },
            testPaperEndPage: function () {
                this.testPaper.currentPage = this.testPaper.pages;
                this.loadData();
            },
            testPaperChangePage: function () {
                this.testPaper.currentPage = this.testPaper.selectPage;
                this.loadData();
            },

            //成绩的分页
            resultPrePages: function () {
                if (this.result.currentPage <= 1) {
                    this.result.currentPage = 1;
                } else {
                    this.result.currentPage = this.result.currentPage - 1;
                }
                this.scoreRank();
            },
            resultNextPages: function () {
                if (this.result.currentPage >= this.result.pages) {
                    this.result.currentPage = this.result.pages;
                } else {
                    this.result.currentPage = this.result.currentPage + 1;
                }
                this.scoreRank();
            },
            resultIndexPage: function () {
                this.result.currentPage = 1;
                this.scoreRank();
            },
            resultEndPage: function () {
                this.result.currentPage = this.result.pages;
                this.scoreRank();
            },
        },
        mounted: function () {
            this.loadData();
        }
    })
</script>
</body>
</html>